<template>
    <ul class="sort-tags list-unstyled clearfix">
        <li>
            <a :class="{'active':(options.sortName == 'publish_time')}" @click.prevent="changeSort('publish_time')" href="javascript:;">最新</a>
        </li>
        <li>
            <a :class="{'active':(options.sortName == 'visit_count')}" @click.prevent="changeSort('visit_count')" href="javascript:;">最热</a>
        </li>
        <li v-for="tag in tagList">
            <a :class="{'active':(options.tagId == tag._id)}" @click.prevent="changeTagId(tag._id)" href="javascript:;">{{tag.name}}</a>
        </li>
        <li>
            <img v-show="isFetching" class="loader-tiny" :src="loadingImg">
        </li>
    </ul>
</template>
<style>

</style>
<script>
    import loading from '../../assets/images/tiny.gif'
    export default{
        props: ['tagList', 'options','isFetching'],
        data(){
            return {
                loadingImg: loading
            }
        },
        methods: {
            changeSort(sortName){
                this.$parent.handleChange({ 'pageNo':1,'sortName':sortName,'tagId': ''})
            },
            changeTagId(tagId){
                this.$parent.handleChange({ 'pageNo':1,'sortName':'','tagId': tagId})
            }
        }
    }
</script>
